<template>
	<view class="pad15">
		<u-collapse>
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index" :open="item.open" :disabled="item.disabled">
				<!-- 	<template v-slot="title">
						{{item.head}}
					</template> -->
					{{item.body}}
				</u-collapse-item>
			</u-collapse>
			
			<!-- 底部的确认按钮 -->
			<view class="footerbtn h88 ">
				<u-icon name="server-fill" color="#D23030"></u-icon>
				<text class="ml20 fw">在线客服</text>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [{
					head: "这是问题1这是问题1这是问题1",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					// disabled: true
				}, {
					head: "这是问题2这是问题2这是问题2这是问题2",
					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: false,
				}, {
					head: "这是问题3",
					body: "这是问题答案这是问题答案这是问题答案这是问题答案这是问题答案",
					open: false,
				}, {
					head: "这是问题4",
					body: "这是问题答案这是问题答案这是问题答案这是问题答案这是问题答案",
					open: false,
				}, {
					head: "这是问题5",
					body: "这是问题答案这是问题答案这是问题答案这是问题答案这是问题答案",
					open: false,
				}],
			};
		}
	}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}
.footerbtn {
		position: fixed;
		width: 90%;
		left: 50%;
		bottom: 60rpx;
		transform: translateX(-50%);
background: #FFFFFF;
border: 1px solid #D23030;
		border-radius: 44rpx;
		font-size: 28rpx;

color: #D23030;
		text-align: center;
		line-height: 88rpx;
	}
</style>
